<script setup lang="ts">
import { Document } from '@element-plus/icons-vue';
import { useI18n } from 'vue-i18n';

import DuplicateFile from '@/features/home/components/DuplicateFile.vue';
import DuplicationAnalysisResult from '@/features/home/models/duplication-analysis-result';

defineProps<{
  processing: boolean;
  analysisResult: DuplicationAnalysisResult | undefined;
  duplicateFileCount: number;
}>();

const { t } = useI18n();
</script>

<template>
  <template v-if="!processing">
    <template v-if="analysisResult">
      <div class="result-container" v-if="duplicateFileCount > 0">
        <div style="padding: 10px" v-for="(value, key) in analysisResult?.duplicateFiles">
          <DuplicateFile style="margin-bottom: 20px" :key :md5="key" :files="value" />
        </div>
      </div>
      <div class="welcome-info-container" v-else>
        <span class="welcome-info-text">{{ t('noDuplicatesFound') }}</span>
      </div>
    </template>
    <div class="welcome-info-container" v-else>
      <el-icon size="30" style="margin-right: 10px">
        <Document />
      </el-icon>
      <span class="welcome-info-text">{{ t('welcomeInfo') }}</span>
    </div>
  </template>
  <div class="welcome-info-container" v-else>
    <span class="welcome-info-text">{{ t('analyzing') }} ...</span>
  </div>
</template>

<style scoped>
.result-container {
  flex-grow: 1;
  overflow: auto;
}

.welcome-info-container {
  display: flex;
  justify-content: center;
  align-items: center;
  color: gray;
  flex-grow: 1;
}

.welcome-info-text {
  font-size: 2rem;
}
</style>
